<template>
    <el-container>

        <el-header>
            <el-select @change="getApplyInfo" v-model="tableData.sendState" placeholder="申请状态">
                <el-option v-for="item in sendStates" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        <el-date-picker
                v-model="tableData.time"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['12:00:00', '08:00:00']"
                @change="getApplyInfo"
                >
            </el-date-picker>

            <el-input type="number" @change="getApplyInfo" keyup.enter.native 
             onkeyup="value=value.replace(/[^\d]/g,'')"
             oninput="if(value.length>11)value=value.slice(0,11)"
             v-model="tableData.phone" placeholder="请输入要查询的电话号码" style="width:20%"></el-input>
          
        </el-header>

        <el-main>
                 <el-table v-loading="tableLoding" :data="tableData.data" style="width: 100%" border>
                <el-table-column prop="phone" label="手机号" sortable>
                </el-table-column>
                <el-table-column prop="ip" label="ip地址" sortable>
                </el-table-column>
                <el-table-column prop="appFlag" label="设备类型" :formatter="appFlagChangeData" sortable>
                </el-table-column>
                <el-table-column prop="time" label="申请时间" sortable>
                </el-table-column>
                <el-table-column prop="sendState" label="全部状态" :formatter="sendStateChangeData"  sortable>
                </el-table-column>
              
            </el-table>
        </el-main>

        <el-footer>
            <div class="block">
                <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
                    @next-click="nextPage" :current-page="tableData.currentPage"
                    :page-sizes="[5, 10, 15, 20,25,30,35,40]" :page-size="tableData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
                </el-pagination>
            </div>
        </el-footer>
    </el-container>


</template>

<script>
    import {
        getApplyInfo
    } from "@/api/permissionApi";


    export default {
        data() {
            return {
                // time:null,
                tableData: { //表格data
                    data: [],
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                    sendState : null,
                    phone:'',
                    // beginTime:'',
                    // endTime:''
                    time:null
                },
                tableLoding: false, //表格加载
                sendStates: [{
                    value: null,
                    label: '全部状态'
                }, {
                    value: 1,
                    label: '申请成功'
                }, {
                    value: 2,
                    label: '重复申请'
                }, {
                    value: 3,
                    label: '申请失败'
                }]
            }
        },
        created: function () {
            this.getApplyInfo()
        },
        methods: {
            //数据控制
            getApplyInfo() {
                this.tableLoding = true
                getApplyInfo(this.tableData).then(response => {
                    this.tableData.data = response.data.data.items
                    this.tableData.total = response.data.data.total
                }).catch(error => {
                    this.$message({
                        showClose: true,
                        message: error,
                        type: 'error'
                    })

                })
                this.tableLoding = false
            },
            changePageSize(val) {
                this.tableData.pageSize = val
                this.getApplyInfo()
            },
            changeCurrentPage(val) {
                this.tableData.currentPage = val
                this.getApplyInfo()
            },
            prevPage(val) {
                this.tableData.currentPage = val
                this.getApplyInfo()
            },
            nextPage(val) {
                this.tableData.currentPage = val
                this.getApplyInfo()
            },
            sendStateChangeData: function (row, column) {
                return row.sendState == '1' ? "申请成功" :
                    row.sendState == '2' ? "重复申请" :
                    row.sendState == '3' ? "申请失败" :
                    "未知"
            },
            appFlagChangeData: function (row, column) {
                return row.appFlag == '1' ? "电脑端" :
                    row.appFlag == '2' ? "手机端" :
                    "未知"
            }
           
        }
    }
</script>

<style>
    .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #70b3ff87 !important;
    }
</style>